function $(x){
    return document.getElementById(x);
}
var app =$("app");
app.onmousemove=function(){
    $("QR").style.display="block";
}
app.onmouseout=function(){
    $("QR").style.display="none";
}
$("shopcar").onmousemove=function(){
    $("shopcar-cont").style.display="block";
}
$("shopcar").onmouseout=function(){
    $("shopcar-cont").style.display="none";
}
$("logo-box").onmousemove=function(){
    $("logobox").style.left="-100%"
}
$("logo-box").onmouseout=function(){
    $("logobox").style.left="0"
}
var btn=$("btn-group").getElementsByTagName("div");
var a=$("img-group");
btn[0].onclick=function(){
    a.style.left="0";
}
btn[1].onclick=function(){
    a.style.left="-100%";
}
btn[2].onclick=function(){
    a.style.left="-200%";
}
btn[3].onclick=function(){
    a.style.left="-300%";
}
$("btn-l").onclick=function(){
    var left =getComputedStyle(a,null).left;
    if(parseInt(left)==0){
        a.style.left="-3678px";
    }else if(parseInt(left)==-1226){
        a.style.left="0";
    }else if(parseInt(left)==-2452){
        a.style.left="-1226px";
    }else if(parseInt(left)==-3678){
        a.style.left="-2452px";
    }
}
$("btn-r").onclick=function(){
    var left =getComputedStyle(a,null).left;
    if(parseInt(left)==0){
        a.style.left="-1226px";
    }else if(parseInt(left)==-1226){
        a.style.left="-2452px";
    }else if(parseInt(left)==-2452){
        a.style.left="-3678px";
    }else if(parseInt(left)==-3678){
        a.style.left="0";
    }
}
$("msg-l").onclick=function(){
    var msg2 = $("msg2");
    msg2.style.left="0%"
}
$("msg-r").onclick=function(){
    var msg2 = $("msg2");
    msg2.style.left="-100%"
}